<template>
	<view>
		<view class="cut_off_rule">--------------view块元素---------------</view>
		<view>我是块元素</view>
		<view>我是块元素</view>
		<view>div、p、li、h1等块元素，使用view代替</view>




		<view class="cut_off_rule">--------------text行元素---------------</view>
		<text>我是行元素</text>
		<text>我是行元素</text>
		<view>span等行元素，使用text代替</view>




		<view class="cut_off_rule">-------------navigator跳转---------------</view>
		<navigator url="../api/api">点我跳转应用内某页面</navigator>




		<view class="cut_off_rule">--------------image图片---------------</view>
		<image src="../../static/logo.png" class="image"></image>
		<image src="../../static/logo.png" mode="aspectFill" class="image"></image>
		<image src="../../static/logo.png" mode="aspectFit" class="image"></image>
		<image src="../../static/logo.png" mode="scaleToFill" class="image"></image>
		<image src="../../static/logo.png" mode="widthFix" class="image"></image>
		<view>mode 有 14 种模式，其中 5 种是缩放模式，9 种是裁剪模式。</view>




		<view class="cut_off_rule">--------------部分自带组件---------------</view>
		<picker>
			<text>点击出现下拉框</text>
		</picker>
		<progress percent="60" active></progress>
		<slider></slider>
		<switch></switch>


		<view class="cut_off_rule">scroll-view 区域滚动视图容器</view>
		<scroll-view scroll-x style="width: 100%; white-space: nowrap;">
			<view class="green" style="display: inline-block; width: 50%; height: 200px; background: green;"></view>
			<view class="red" style="display: inline-block; width: 50%; height: 200px; background: red;"></view>
			<view class="yellow" style="display: inline-block; width: 50%; height: 200px; background: yellow;"></view>
			<view class="blue" style="display: inline-block; width: 50%; height: 200px; background: blue;"></view>
		</scroll-view>


		<view class="cut_off_rule">swiper 可滑动区域视图容器</view>
		<swiper class="swiper" :autoplay="true" :interval="2000">
			<swiper-item>
				<view style="display: inline-block; width: 100%; height: 200px; background: red;">A</view>
			</swiper-item>
			<swiper-item>
				<view style="display: inline-block; width: 100%; height: 200px; background: blue;">B</view>
			</swiper-item>
			<swiper-item>
				<view style="display: inline-block; width: 100%;  height: 200px; background: yellow;">C</view>
			</swiper-item>
		</swiper>



		<view class="cut_off_rule">--------------icon图标---------------</view>
		<icon size="20" type="success"></icon>
		<icon size="20" type="info"></icon>
		<icon size="20" type="warn"></icon>
		<icon size="20" type="waiting"></icon>
		<icon size="20" type="cancel"></icon>
		<icon size="20" type="download"></icon>



		<view class="cut_off_rule">--------------camera相机---------------</view>
		<camera device-position="back" flash="off" @error="error" style="width: 100%; height: 300px;"></camera>
		<button type="primary" @click="takePhoto">拍照</button>
		<view>预览</view>
		<image mode="widthFix" :src="src"></image>
		
		<view class="cut_off_rule">--------------map地图控件---------------</view>
		<map style="width: 100vw;height: 50vh;"></map>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				src:""
			}
		},
		methods: {
			takePhoto() {
				const ctx = uni.createCameraContext();
				ctx.takePhoto({
					quality: 'high',
					success: (res) => {
						console.log(res)
						this.src = res.tempImagePath
					}
				});
			},
			error(e) {
				console.log(e.detail);
			}
		}
	}
</script>

<style scoped>
	.cut_off_rule {
		width: 100vw;
		text-align: center;
		margin-top: 100rpx;
	}

	.image {
		width: 100rpx;
		height: 180rpx;
		margin: 10rpx;
	}
</style>
